<template>
  <div id="crount">
    <van-dropdown-menu>
      <van-dropdown-item class="dropdown1" title="分类" ref="item1">
        <ol>
          <li @click="cho">重置</li>
          <li @click="choS">确认</li>
        </ol>
      </van-dropdown-item>
      <van-dropdown-item class="dropdown2" title="排序" ref="item2">
        <ul>
          <li
            v-for="(item, index) in option"
            :key="index"
            :class="{ active: active == index }"
            @click="activeA(item.value,index)"
          >
            {{ item.text }}
          </li>
        </ul>
      </van-dropdown-item>
      <van-dropdown-item title="筛选" ref="item3" class="dropdown3">
        <div class="cscS">
          <div
            :class="{ active: active1 == index }"
            v-for="(item, index) in lsFg"
            :key="index"
            @click="activeZ(item.id,index)"
          >
            {{ item.name }}
          </div>
          <div v-for="(v, i) in num" :key="i"></div>
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>
    <div>
      <div class="main" v-for="(item, index) in opt" :key="index">
        <p class="pop">{{ item.title }}</p>
        <img :src="item.cover_img" alt="" />
        <p class="pop1">
          <img src="@/assets/email/shijian.png" />{{
            item.end_play_date | timer
          }}|共{{ item.sales_num }}课时
        </p>
        <p class="pop2">
          <span>{{ item.brows_num }}已报名</span>
          <span>{{ item.price ? item.price : "免费" }}</span>
        </p>
      </div>
    </div>
    <Ddvb></Ddvb>
  </div>
</template>
<script>
import Ddvb from "@/views/ddvb.vue";
import { getCourseBasis, getCourseClassify } from "./tese";
export default {
  components: {
    Ddvb,
  },
  data() {
    return {
      active: 0,
      active1: 0,
      option: [
        { value: 0, text: "综合排序" },
        { value: 1, text: "最新" },
        { value: 2, text: "最热" },
        { value: 3, text: "价格从低到高" },
        { value: 4, text: "价格从高到低" },
      ],
      opt: [],
      frt: {
        course_type: 0,
        limit: 4,
        page: 1,
        order_by: 0,
      },
      last_page: 1,
      lsFg: [],
      last: false,
    };
  },
  computed: {
    num() {
      let num = 0;
      let yu = this.opt.length % 4;
      yu === 0 ? (num = 0) : (num = 4 - yu);
      return num;
    },
  },
  mounted() {
    this.icIc();
    this.getCourseC();

    window.onscroll = () => {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      //变量windowHeight是可视区的高度
      let windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      //滚动条到底部的条件
      //scrollTop!=0是由于其他功能在body上设置了最小高度100vh，切换tab的时候body高度位100vh。
      if (
        Math.ceil(scrollTop + windowHeight) == parseInt(scrollHeight) &&
        scrollTop != 0
      ) {
        // this.changeTab();

        if (this.frt.page < this.last_page) {
          this.frt.page += 1;
          this.icIc();
          this.last = false;
          console.log("请求数据--------");
        } else {
          this.last = true;
        }
      }
    };

    window.addEventListener("beforeunload", (e) => {
      window.scroll(0, 0);
    });
  },
  methods: {
    activeA(cid,id) {
      this.active = id;
      this.frt.page = 1;

      this.opt = [];
console.log(cid);
      this.frt.order_by = cid;
      this.icIc();
      this.$refs.item2.toggle();
    },
    cho(){
        this.opt = [];
        this.icIc();
    },
    choS(){
        this.$refs.item1.toggle();
    },
    activeZ(cid,id) {
      this.active1 = id;
      this.frt.page = 1;

      this.opt = [];
      console.log(cid);
      this.frt.order_by = cid;
      this.icIc();
      this.$refs.item3.toggle();
    },
    async icIc() {
      let res = await getCourseBasis(this.frt);
      this.last_page = res.data.data.last_page;
      this.opt = [...this.opt, ...res.data.data.list];
      //   console.log(this.opt);
    },
    async getCourseC() {
      let res = await getCourseClassify();
      console.log(res);
      this.lsFg = res.data.data.appCourseType;
    },
  },
};
</script>
<style lang="scss" scoped>
#crount {
  width: 100%;
  height: 100vh;
  background-color: white;
}
.dropdown1 {
  ol {
    display: flex;
    font-size: 16px;
    height: 70px;
    color: white;
    li {
      width: 100px;
      height: 35px;
      display: flex;
      margin: auto;
      justify-content: center;
      align-items: center;
      background-color: red;
    }
    li:nth-child(1) {
      background-color: blue;
    }
  }
}
.dropdown2 {
  ul {
    li {
      text-align: center;
      line-height: 50px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
  }
}
.dropdown3 {
  .cscS {
    height: 100px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    div {
      width: 80px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 5px;
    }
  }
}
.main {
  background-color: rgba(0, 0, 0, 0.1);
  margin: 10px;
  padding: 20px;
  .pop {
    font-size: 16px;
  }
  .pop1 {
    display: flex;
    align-items: center;
    color: rgba(0, 0, 0, 0.4);
    img {
      width: 15px;
      height: 15px;
    }
  }
  .pop2 {
    color: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: space-between;
    span:nth-child(2) {
      font-size: 16px;
      color: green;
    }
  }
  img {
    width: 40px;
    height: 40px;
  }
}
.active {
  color: red;
}
</style>